import React from "react";
import { connect } from "react-redux";

class Wish extends React.Component {
  render() {
    const { wish } = this.props;
    if (wish.length > 0) {
      return (
        <div className="card">
          <div className="card-header py-3">
            <h5 className="mb-0">心愿单</h5>
          </div>
          <div className="card-body">
            <table className="table">
              <thead>
                <tr>
                  <th>名称</th>
                  <th>价格</th>
                  <th>颜色</th>
                  <th>尺码</th>
                </tr>
              </thead>
              <tbody>
                {wish.map((item) => (
                  <tr key={item.id}>
                    <th>{item.title}</th>
                    <td>¥{item.price}</td>
                    <td>{item.color}</td>
                    <td>{item.size}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      );
    }
    return null;
  }
}

const mapStateToProps = (state) => ({ wish: state.wishReducer.wish });

export default connect(mapStateToProps)(Wish);
